<template>
  <div style="height:100%;width:100%;position:relative;">
    <div class="pagetop">
      <div style="width:100%">

        <table class="table1style" style="font-size:12px;white-space: nowrap;">
          <tr>
            <td align="center">开始时间</td>
            <td>

              <el-date-picker v-model="sdate" :clearable="false" type="datetime" placeholder="选择日期"
                value-format="yyyy-MM-dd HH:mm:ss" style="width:180px;">
              </el-date-picker>
            </td>
            <td align="center">维护类型</td>
            <td>
              <el-select v-model="maintaintype" clearable>
                <el-option value="REORGANIZE" label="重组索引"></el-option>
                <el-option value="STATISTICS" label="更新统计信息"></el-option>
                <el-option value="DELETE" label="删除日志等"></el-option>
              </el-select>
            </td>
            <td align="center">表&nbsp;&nbsp;&nbsp;名</td>
            <td>
              <el-autocomplete class="inline-input" v-model="tablename" :fetch-suggestions="querySearch"
                placeholder="请输入内容" clearable style="width:150px"></el-autocomplete>

            </td>
            <td align="center">索引大小</td>
            <td>
              <el-input v-model="indexsize" style="width:90px" clearable></el-input>
            </td>
            <td align="center">执行用时</td>
            <td>
              <el-select v-model="exeusetime" clearable style="width:90px">
                <el-option value="1000" label="1秒"></el-option>
                <el-option value="5000" label="5秒"></el-option>
                <el-option value="10000" label="10秒"></el-option>
                <el-option value="60000" label="1分钟"></el-option>
                <el-option value="300000" label="5分钟"></el-option>
                <el-option value="600000" label="10分钟"></el-option>
                <el-option value="1800000" label="30分钟"></el-option>
              </el-select>
            </td>
            <td style="color:red; font-weight:bold;font-size:16px;padding-left:20px;">{{ setingstr }}</td>
          </tr>
          <tr>
            <td align="center"></td>
            <td>
              <el-date-picker v-model="edate" :clearable="false" type="datetime" placeholder="选择日期"
                value-format="yyyy-MM-dd HH:mm:ss" style="width:180px;">
              </el-date-picker>
            </td>

            <td align="center">维护结果</td>
            <td>
              <el-select v-model="maintainstatus" clearable>
                <el-option value="0" label="开始"></el-option>
                <el-option value="1" label="成功"></el-option>
                <el-option value="9" label="失败"></el-option>
              </el-select>
            </td>
            <td align="center">索引名</td>
            <td>
              <el-input v-model="indexname" style="width:150px" clearable></el-input>
            </td>
            <td align="center">碎片大小</td>
            <td>
              <el-input v-model="startfragmentation" style="width:90px" clearable></el-input>
            </td>
          </tr>
        </table>

        <div class="operation-list">
          <el-button @click="btnQuery" icon="el-icon-search" type="primary">查询</el-button>
          <el-button @click="btnClear" icon="el-icon-circle-close">清除</el-button>
          <el-button @click="btnExport" icon="el-icon-download">导出</el-button>
          <el-button @click="btnSeting" icon="el-icon-download" v-has="'PSETUP'">设置</el-button>
        </div>

      </div>
    </div>
    <div class="pagecenter">
      <div class="middle-center">
        <vxe-table :data.sync="tableData" :select-config="selectConfig" height="auto" highlight-current-row
          :loading="loading" highlight-hover-row highlight-hover-column resizable show-header-overflow="tooltip" border
          fit show-overflow="tooltip" header-align="center" size="mini" stripe ref="xTable1"
          :sort-config="{ trigger: 'cell' }">
          <vxe-table-column field="tablename" title="表名" width="130px" sortable></vxe-table-column>
          <vxe-table-column field="indexname" title="索引名" width="180px" sortable></vxe-table-column>
          <vxe-table-column field="maintaintypename" title="维护类型" width="80px" sortable></vxe-table-column>
          <vxe-table-column field="maintainstatusname" title="维护结果" width="80px" sortable
            align="center"></vxe-table-column>
          <vxe-table-column field="cp_exectime" title="执行用时(ms)" width="80px" sortable align="right"
            header-align="center"></vxe-table-column>
          <vxe-table-column field="startfragmentation" title="前碎片比(%)" width="80px" sortable align="right"
            header-align="center">
            <!-- <template v-slot="{row}">
                          {{row.startfragmentation>0?row.startfragmentation+"%":row.startfragmentation}}
                      </template> -->
          </vxe-table-column>
          <vxe-table-column field="endfragmentation" title="后碎片比(%)" width="80px" sortable align="right"
            header-align="center">
            <!-- <template v-slot="{row}">
                          {{row.endfragmentation>0?row.endfragmentation+"%":row.endfragmentation}}
                      </template> -->
          </vxe-table-column>
          <vxe-table-column field="indexsize" title="索引大小" width="80px" sortable align="right"
            header-align="center"></vxe-table-column>
          <vxe-table-column field="maintainlog" title="维护内容" width="240px" sortable></vxe-table-column>
          <vxe-table-column field="startdt" title="维护开始时间" width="120px" sortable></vxe-table-column>
          <vxe-table-column field="enddt" title="维护完成时间" width="120px" sortable></vxe-table-column>
          <vxe-table-column field="execnum" title="执行批次号" width="160px" sortable></vxe-table-column>
          <vxe-table-column field="maintainid" title="索引维护记录ID" width="100px" sortable align="center"></vxe-table-column>
        </vxe-table>
      </div>
    </div>

  </div>
</template>

<script type="text/javascript">
import XEUtils from "xe-utils";
import XLSX from "xlsx";
import FileSaver from "file-saver";
export default {
  name: "MNG181",
  data() {
    return {
      selectConfig: { tigger: "row" },
      tableData: [],
      loading: false,
      sdate: "",
      edate: "",
      maintaintype: "",
      maintainstatus: "",
      tablename: "",
      indexname: "",
      indexsize: "",
      startfragmentation: "",
      exeusetime: "",
      tablenameopts: [
        { label: "req_master", value: "req_master" },
        { label: "lab_report", value: "lab_report" },
        { label: "req_detail", value: "req_detail" },
        { label: "req_result", value: "req_result" },
        { label: "lab_result", value: "lab_result" },
        { label: "lab_instrdata", value: "lab_instrdata" },
        { label: "plan_hisinter", value: "plan_hisinter" },
        { label: "plan_exinter", value: "plan_exinter" },
      ],
      setingstr: "",
    };
  },
  created() {
    this.InitDate();
  },
  mounted() { },
  updated() { },
  methods: {
    InitDate() {
      var day = new Date();
      day.setTime(day.getTime() - 30 * 24 * 60 * 60 * 1000);
      var s2 = day.getFullYear() + "-" + (day.getMonth() + 1) + "-" + day.getDate() + " 00:00:00";
      this.sdate = s2;
      this.edate = "";
      this.ShowSetingInfo();
    },
    btnQuery() {
      this.Query();
    },
    btnClear() {
      this.InitDate();
      this.maintaintype = "";
      this.maintainstatus = "";
      this.tablename = "";
      this.indexname = "";
      this.indexsize = "";
      this.startfragmentation = "";
      this.exeusetime = "";
      this.tableData = [];
    },
    btnExport() {
      // this.$refs.xTable.exportCsv({ filename: "LIS836 申请项目对照检验目的" });
      // return false;
      let data = this.getExportData();
      let book = XLSX.utils.book_new();
      let sheet = XLSX.utils.json_to_sheet(data, { skipHeader: true });
      XLSX.utils.book_append_sheet(book, sheet);
      let wbout = XLSX.write(book, { bookType: "xlsx", bookSST: false, type: "binary" });
      let blob = new Blob([this.toBuffer(wbout)], { type: "application/octet-stream" });
      // 保存导出
      FileSaver.saveAs(blob, "MNG181数据库维护记录查询.xlsx");
    },
    getExportData() {
      let datas = this.tableData;
      let tablecolumns = this.$refs.xTable1.getColumns();
      let columns = tablecolumns.filter((item) => item.property);
      let headers = [columns.map((item) => item.title)];
      return headers.concat(
        datas.map((row) => {
          return columns.map((column) => {
            return row[column.property];
          });
        })
      );
    },
    async btnSeting() {
      var params = null;
      try {
        let seting = await this.GetSeting();
        if (seting) {
          params = seting;
        }
      } catch (e) { }
      let myComponent = () => import("./MNG181_seting.vue");
      try {
        let diaRet = await this.$rmDialog(myComponent, null, params);
        this.ShowSetingInfo();
      } catch (err) {
        console.log("err", err);
      }
    },
    async ShowSetingInfo() {
      this.setingstr = "";
      let seting = await this.GetSeting();
      if (seting && seting.OpenIndexReOrganize) {
        this.setingstr = "已开启自动重组索引，执行时间点为：" + seting.execTime.toString();
      } else {
        this.setingstr = "尚未开启自动重组索引";
      }
    },
    async GetSeting() {
      try {
        let seting = await this.$tool.request({
          url: "MNG/MNG1/MNG181",
          method: "post",
          data: {
            action: "getSeting",
          },
        });
        return seting;
      } catch (err) {
        console.log("err", err);
        return null;
      }
    },
    toBuffer(wbout) {
      let buf = new ArrayBuffer(wbout.length);
      let view = new Uint8Array(buf);
      for (let index = 0; index !== wbout.length; ++index) view[index] = wbout.charCodeAt(index) & 0xff;
      return buf;
    },
    Query() {
      this.loading = true;
      this.$tool
        .request({
          url: "MNG/MNG1/MNG181",
          method: "post",
          data: {
            action: "queryLog",
            sdate: this.sdate,
            edate: this.edate,
            maintaintype: this.maintaintype,
            maintainstatus: this.maintainstatus,
            tablename: this.tablename,
            indexname: this.indexname,
            indexsize: this.indexsize,
            startfragmentation: this.startfragmentation,
            exeusetime: this.exeusetime,
          },
        })
        .then((res) => {
          this.loading = false;
          if (!res.hasOwnProperty("errcode")) {
            this.tableData = res.data;
          }
        })
        .catch((err) => {
          this.loading = false;
          this.$alert(err, "错误");
        });
    },
    querySearch(queryString, cb) {
      var tablenameopts = this.tablenameopts;
      var results = queryString ? tablenameopts.filter(this.createFilter(queryString)) : tablenameopts;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
      };
    },
  },
};
</script>

<style scoped>
.pagetop {
  width: 100%;
  height: 95px;
  display: -webkit-box;
  -webkit-box-pack: left;
  -webkit-box-align: center;
  border: 1px solid #ccc;
  position: absolute;
  z-index: 99;
  overflow-x: auto;
  overflow-x: overlay;
}

.pagecenter {
  position: absolute;
  top: 100px;
  width: 100%;
  left: 0;
  bottom: 0px;
  overflow: auto;
}

.middle-center {
  position: absolute;
  height: 100%;
  left: 0px;
  right: 0px;
  overflow: auto;
}

table {
  font-size: 12px;
  border-collapse: separate;
  border-spacing: 5px;
}

.table1style {
  padding: 0px 5px 0px 5px;
  font-size: 12px;
}

.operation-list {
  float: right;
  margin-right: 5px;
  margin-bottom: 5px;
}

::-webkit-scrollbar {
  width: 0px;
  height: 5px;
  border: 4px solid white;
}

::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
}

::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

::v-deep .fail {
  color: red;
}</style>
